<template>
     <!-- 卡片 -->
     <el-card>
         <!-- 查询用户名,清空用户名 -->
         <el-form inline>
           <el-form-item >
            <el-input  v-model="paramsData.inputUser" placeholder="请输入用户名"  />
           </el-form-item>
         <el-button type="primary" 
         icon="el-icon-search" 
         size="medium" 
         style="margin-top:2px ;" 
         @click="searchName"
         >查询</el-button>
         <el-button type="default" size="medium" @click="clearName">清空</el-button>
        </el-form>

         <!-- 添加用户,批量删除 -->
         <el-button type="primary"
          icon="el-icon-search" 
          size="small"
          round style="margin:20px 0 ;" 
          @click="addnewUser"
          >添加用户</el-button>
         <el-button type="danger" size="small" round @click="delateAllusers" :disabled="tableData.seletedIds.length === 0">批量删除</el-button>

          <!-- 用户信息,分配角色 -->
        <el-table border highlight-current-row 
        :data = "tableData.users"
         style="margin-bottom: 20px;"
         @selection-change="searchSelectionCg"
         >
          <el-table-column type="selection" label="全选" align="center"></el-table-column>
          <el-table-column type="index" label="序号" align="center" width="100px"></el-table-column>
          <el-table-column prop="username" label="用户账号" align="center"  width="200px" ></el-table-column>
          <el-table-column prop="nickName" label="用户昵称" align="center"></el-table-column>
          <el-table-column prop="roleName" label="角色列表" align="center"></el-table-column>
          <el-table-column prop="gmtCreate" label="创建时间" align="center"></el-table-column>
          <el-table-column prop="gmtModified" label="更新时间" align="center"></el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <template v-slot="{row}">
            <el-button type="info" size="small" icon="el-icon-user" title="分配角色" @click="assignUser(row)"/>
            <el-button type="primary" size="small" icon="el-icon-edit-outline" title="修改用户"  @click="updateUser(row)" />
            <el-popconfirm
              style="margin-left: 10px;"
              icon="el-icon-info"
              icon-color="red"
              :title="`确定删除${row.username}吗？`"
              @onConfirm="deleteUser(row.id)"
            >
            <el-button slot="reference"  type="danger" size="small" icon="el-icon-delete" title="删除用户"/>
            </el-popconfirm>
          </template>
          </el-table-column>
        </el-table>
          
        <!-- 设置分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paramsData.page"
          :page-size="paramsData.limit"
          :page-sizes="[2, 5, 15, 20]"
          background
          layout="prev, pager, next, jumper, ->, sizes, total"
          :total="tableData.total">
        </el-pagination>

        <!-- Dialog对话框 修改用户或新添用户 -->
        <el-dialog :title="userData.user.id? '修改用户':'新添用户'"
         v-model="dialogVisible"
         :visible.sync="dialogVisible" width="40%">
          <el-form  label-width="150px" :model="userData.user">
             <el-form-item label="用户名" >
               <el-input v-model="userData.user.username" />
             </el-form-item>
             <el-form-item label="用户昵称">
               <el-input v-model="userData.user.nickName" />
             </el-form-item>
             <el-form-item  label="用户密码" v-show="!userData.user.id" >
               <el-input v-model="userData.user.password" />
             </el-form-item>
          </el-form>
          <!-- 确定和取消按钮 -->
          <span slot="footer" class="dialog-footer">
           <el-button @click="cancelUser">取 消</el-button>
           <el-button type="primary" @click="addOraupdataUser">确 定</el-button>
          </span>
      </el-dialog>


     </el-card>
</template>

<script>
//使用Vue2
// import { mapState } from 'vuex';
import {getuserpageList,addOrupdateUsermsg,delateOneUser,dltSearchUser} from "@/api/acl/userbar"
import { Message,MessageBox} from "element-ui"


export default {
  name: 'Userbar',
  data() {
    return {
         //表格信息初始值
          tableData:{
            total:0 ,
            users:[],
            seletedIds:[]
          },
         //用户信息初始值
          userData:{
            user:{
              username: '',
              nickName: '',
              password: '',
            }
          },
          //对话框开关
          dialogVisible:false,
         //获取分页列表初试数据
          paramsData:{
           inputUser:'', 
           searchUsername:'',
           page: 1, 
           limit: 5,
         },
  }

  },
   
  mounted(){
    // this.getUsermsgList()
    this.getUsersList()
  },
  
  methods: {
    //使用三连环
    // getUsermsgList(){
    //   this.$store.dispatch("usermsg/getuserMsg" , {page:this.page,limit:this.limit})
    // } ,
    
   //获取用户详情及分页列表
    async getUsersList (page,limit){
      page = this.paramsData.page,
      limit = this.paramsData.limit
     try{
        const result = await getuserpageList(page,limit,{username:this.paramsData.searchUsername})
        if(result.code === 20000){
          this.tableData.users = result.data.items
          this.tableData.total  = result.data.total
          this.tableData.seletedIds = []
          // console.log(this.tableState.users)
          // console.log(result)
          return "yes"
        }else{
            return Promise.reject(new Error('failed'))
        }
     }catch(error){
        return Promise.reject(new Error('failed'))
     }
   } ,
   //更改每页显示数量
    handleSizeChange(val){
      this.paramsData.limit = val
      // console.log(val)
      this.getUsersList()

    },
   //更改当前页
    handleCurrentChange(val){
       this.paramsData.page = val
      //  console.log(val)
       this.getUsersList()
    },
   // 用户点击搜索 选出带有相同字段数据
    searchName(){
      // console.log(this.paramsData.inputUser)
      this.paramsData.searchUsername = this.paramsData.inputUser
      this.getUsersList()
    },
   //清空用户搜索
    clearName(){
      // console.log(this.paramsData.searchUsername)
      this.paramsData.searchUsername = ""
      this.paramsData.inputUser = ""
      this.getUsersList()
      // console.log(this.paramsData.username)
  },

   //点击添加按钮 添加一个新用户
   addnewUser(){
    this.userData.user = {
      username: '',
      nickName: '',
      password: '',
    }
    this.dialogVisible = true
   },
   //点击修改按钮 显示当前用户信息 修改当前用户
   updateUser(user){
    this.userData.user = {...user}
    this.dialogVisible = true
   },
   //点击删除按钮 删除某一条信息
   async deleteUser(id){
    // console.log("22222")
      try{
      await delateOneUser(id)
      Message.success("删除成功")
      this.getUsersList(this.tableData.users === 1? this.paramsData.page-1 : this.paramsData.page)
      }catch(error){
      return Promise.reject(new Error('failed'))
      }
   },
   //点击添加或者修改-确认时候发送请求
   async addOraupdataUser(){
     this.dialogVisible = false
     const {user} = this.userData
     try{
        await addOrupdateUsermsg(user)
        // debugger
        Message.success("保存成功")
        this.getUsersList(user.id ? this.paramsData.page : 1)
        // console.log("1111")
        this.userData.user = {
          username: '',
          nickName: '',
          password: ''
        }
     }catch(error){
        return Promise.reject(new Error('failed'))
     }
   },
   //点击取消，清空input内容
   cancelUser(){
    this.dialogVisible = false
    this.userData.user = {
      username: '',
      nickName: '',
      password: ''
    }
   },
   //监听selection的变化 参数需传selection 遍历选中的每一项 返回一个所选中的每一项id组成的新数组
   searchSelectionCg(selection){
      this.tableData.seletedIds = selection.map(item => item.id)
   },
   //点击批量删除 删除选中的用户
   delateAllusers(){
    MessageBox.confirm('您确定删除所选内容吗?').then(async () => {
      await dltSearchUser(this.tableData.seletedIds)
      Message.success('删除成功')
      console.log("3333")
      this.getUsersList()
    }).catch(() => {
      Message.info('取消删除')
    })
   },
   
  },

  computed:{
    // ...mapState("usermsg",['usermsgList']),
  }

  
}
</script>

<style lang="scss" scoped>

</style>
